<template>
  <div class="container">
    <div id="root" style="width: 450px; height: 400px"></div>
  </div>
</template>

<script>
import Clay from '@csii/vx-clay/dist/clay-template.js';

// import uiLines from '@csii/vx-clay-echart/ui-lines.js';
import uiBar from '@csii/vx-clay-echart/ui-bar.js';
// 注册组件
// Clay.series('ui-lines', uiLines);
import example from './example.clay';
Clay.series('ui-bar', uiBar);
export default {
  name: '',
  data() {
    return {
      clay: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.clay = new Clay({
        el: document.getElementById('root'),
        render: example,
        data: function () {
          return {
            xnumber: -10,
            ynumber: 10,
            widthnumber: 450,
            heightnumber: 400,
            Array: [12.6, 23.0, 28.5, 29.8, 33.5, 36.0, 31.2, 33.3, 20, 34.6, 15, 20],
            rulerArray: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            color: ['red'],
          };
        },
        methods: {
          doit: function (target) {
            console.log(target, 'target');
          },
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
